<template>
    <div class="col-md-5">
        <div class="form-group">
            <div class="jumbotron" style="color: black;background:#db41b3" v-show="errorText" >
                <span >用户名或者评论内容不能为空</span>
            </div>
            <label for="name">姓名</label>
            <input type="text" class="form-control" @focus="errorText=false"
                   id="name" placeholder="输入名字" v-model="name">
        </div>
        <div class="form-group">
            <label for="comment-text">输入评论内容</label>
            <textarea class="form-control" rows="6" @focus="errorText=false"
                      id="comment-text" style="resize: none" v-model="content"/>
        </div>
        <button type="button" @click.prevent="addComment"
                class="btn btn-info btn-block">
            提交
        </button>
    </div>
</template>

<script>
    export default {
        name: "CommentSubmit",
        data(){
            return{
                name: '',
                content: '',
                errorText: false,
            }
        },
        methods:{
            addComment:function () {
                if (!this.name.trim() || !this.content.trim()){
                    this.errorText=true;
                    return false;
                }
                // $emit 绑定方法，这里绑定父组件的方法
                this.$emit('addComment',
                {name: this.name, content: this.content}
                );
                this.name = this.content = '';
            }
        }
    }
</script>

<style scoped>

</style>